<template>
  <view class="loading-more" :class="[status]">
    <view class="iconfont" :class="fv.icon" v-if="fv.icon"></view>
    <view class="text">{{ fv.text }}</view>
  </view>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { variables } from '..'

const props = defineProps<{
  status: typeof variables.loadingMoreSlot[number]
  rootProps: ZPagingProps
}>()
const emits = defineEmits({
  reload: () => true
})
const fv = computed(() => {
  switch (props.status) {
    case variables.DefaultSlots.loadingMoreDefault:
      return {
        text: props.rootProps.loadingMoreDefaultText,
        handle: () => emits('reload')
      }
    case variables.DefaultSlots.loadingMoreLoading:
      return {
        text: props.rootProps.loadingMoreLoadingText,
        icon: ['icon-loading']
      }
    case variables.DefaultSlots.loadingMoreNoMore:
      return {
        text: props.rootProps.loadingMoreNoMoreText
      }
    case variables.DefaultSlots.loadingMoreFail:
      return {
        text: props.rootProps.loadingMoreFailText,
        handle: () => emits('reload')
      }
  }
})
</script>

<style scoped lang="scss">
$gap: 16rpx;

.loading-more {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80rpx;

  .iconfont {
    margin-right: $gap;
  }
}

.loadingMoreNoMore {
  .text {
    display: flex;
    align-items: center;

    &::before,
    &::after {
      margin-right: $gap;
      content: '';
      width: 100rpx;
      height: 2rpx;
      display: block;
      background: #fff;
    }

    &::after {
      margin-right: 0;
      margin-left: $gap;
    }
  }
}
</style>